<!-- 任务领取列表 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true" :isrefresh="true">
			<block style="color: #777777;font-size: 32rpx;" slot="content">任务领取</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-orange cur' : ''" v-for="(item, index) in navs"
					:key="index" @tap="tabSelect" :data-id="index">
					{{ item }}
				</view>
			</view>
		</scroll-view>
		<view v-if="!isHaveTask">
			<view style="margin: 20rpx 0;">
				<view class="cu-bar search bg-white">
					<view class="search-form">
						<text class="cuIcon-search"></text>
						<input v-model="keys" :adjust-position="false" type="text" placeholder="任务名称" confirm-type="search"></input>
					</view>
					<view class="action">
						<button @click="search" class="cu-btn bg-system-blue shadow-blur round">搜索</button>
					</view>
				</view>
			</view>

			<view v-if="!dataEmpty" :style="{ 'height': scrollHeight + 'px' }" style="overflow: hidden;">
				<movable-refresh ref="movableRefresh" :scrollHeight="scrollHeight" :noMore="noMore" :showGoTop="true"
					@refresh="refresh" @loadMore="loadMore" @="scrollTop">
					<view>
						<view class="content" v-for="(item, index) in list" :key="index">
							<view class="pd">
								<text class="title">{{ item.name }}</text>
								<p class="list-box">
									<text class="list-info">类型：</text>
									<text class="time list-title">{{ item.content || '暂无'}}</text>
								</p>
								<p class="list-box">
									<text class="list-info">描述：</text>
									<text class="time list-title">{{ item.remark || '暂无'}}</text>
								</p>
								<p class="list-box">
									<text class="list-info">巡检时间：</text>
									<text class="time list-title">{{ item.startTime | taskDate }}--{{ item.endTime | taskDate }}</text>
								</p>
								<p class="list-box">
									<text class="list-info">任务描述：</text>
									<text class="time list-title">{{ item.content || '暂无'}}</text>
								</p>
								<button :disabled="item.status == 1" class="my-btn cu-btn bg-system-blue shadow"
									@click="see_detail(item.ucId)">领取</button>
							</view>
						</view>
					</view>
				</movable-refresh>
			</view>
			<view v-if="dataEmpty" class="empty">
				<p>暂无数据</p>
			</view>
		</view>

		<view v-if="isHaveTask" style="color: #777777;margin: 40rpx auto;display: flex;justify-content: center;">
			<text>已领取过任务</text>
		</view>
		<message />
	</view>
</template>

<script>
import movableRefresh from '@/components/zyq-movableRefresh/zyq-movableRefresh.vue'
export default {
	components: {
		movableRefresh
	},
	onLoad() {
		if(!this.mark) {
			return
		}
		this.mark = false
		let system = uni.getSystemInfoSync()
		this.scrollHeight = system.windowHeight - system.statusBarHeight - 50

		// 判断是否已经领取过任务
		this.isTask()
	},
	data() {
		return {
			TabCur: 0,
			scrollLeft: 0,
			navs: ['全部', '已领取', '未领取'],
			list: [],
			scrollHeight: 300,
			noMore: false,
			pageNum: 1,
			pageSize: 5,
			keys: null,
			dataEmpty: false,
			isHaveTask: false,
			mark: true
		}
	},
	methods: {
		search() {
			this.refresh()
		},
		isTask() {
			let that = this
			let app = getApp()
			app.globalData.request({
				url: 'wx/taskmanage/isReceived',
			}).then(function (res) {
				that.isHaveTask = res.data.data
				if (!that.isHaveTask) {
					that.refresh()
				} else {
					that.mark = true
				}
			}).catch(function (e) {
					that.mark = true
			})
		},
		inputEnter() {
			for (let i = 0; i < this.list.length; i++) {
				if (this.list[i]) {
					this.list[i] = this.list[i].filter(value => value.name !== keys);
				}
			}

		},
		tabSelect(e) {
			if(!this.mark) {
				return
			}
			this.dataEmpty = false
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			if (!this.isHaveTask) {
				this.mark = false
				this.refresh()
			}
		},
		InputBlur(e) {
			this.InputBottom = 0
		},
		scrollTop(scrollTop) {
			this.scrollTop = scrollTop
		},
		refresh() {
			this.pageNum = 1
			let that = this
			that.noMore = false
			let list = []
			// 封装参数
			let params = {
				"pageNum": that.pageNum,
				"pageSize": that.pageSize,
				"name": that.keys
			}
			if (that.TabCur == 1) {
				params.status = 1
			}
			if (that.TabCur == 2) {
				params.status = 0
			}
			// 请求数据
			let app = getApp()
			app.globalData.request({
				url: 'wx/taskmanage/getEnterpriseTaskPage',
				data: params
			}).then(function (res) {

				let datas = res.data.data.list
				let recors = []
				for (let i = 0; i < datas.length; i++) {
					recors.push(datas[i])
				}
				that.list = recors
				that.pageNum++
				if (res.data.data.pages === 1) {
					that.noMore = true
				}
				if (that.list.length == 0) {
					that.dataEmpty = true
				} else {
					that.dataEmpty = false
				}
				if (that.$refs.movableRefresh) {
					let that_ = that
					setTimeout(function () {
						that_.$refs.movableRefresh.endLoad() //刷新结束
					}, 1000)
				}
				that.mark = true
			}).catch(function (e) {
				that.mark = true
				uni.showToast({
					title: "请稍后再试",
					icon: 'none'
				})
			})


		},
		loadMore() {
			if (this.noMore) {
				return
			}

			let list = this.list
			let that = this
			if (that.pageNum) {

			}
			// 封装参数
			let params = {
				"pageNum": this.pageNum,
				"pageSize": this.pageSize
			}
			// 请求数据
			let app = getApp()
			app.globalData.request({
				url: 'wx/taskmanage/getEnterpriseTaskPage',
				data: {
					...params
				}
			}).then(function (res) {
				let datas = res.data.data.list
				for (let i = 0; i < datas.length; i++) {
					list.push(datas[i])
				}
				that.list = list


				that.pageNum++
				if (res.data.data.pages === that.pageNum) {
					that.noMore = true
				}

				if (that.$refs.movableRefresh) {
					let that_ = that
					setTimeout(function () {
						that_.$refs.movableRefresh.endLoad() //刷新结束
					}, 1000)
				}
			}).catch(function (e) {

			})
		},
		see_detail(ucId) {
			let that = this
			let app = getApp()
			app.globalData.request({
				url: 'wx/taskmanage/taskReceive',
				data: {
					"ucId": ucId
				}
			}).then(function (res) {
				uni.showToast({
					title: "任务领取成功",
					icon: 'success'
				})
				uni.navigateTo({
					url: '../../pages/index/index',
				})
			}).catch(function (e) {

			})
		}
	}
}
</script>

<style scoped>
.pd {
	background-color: #FFFFFF;
	margin: 20rpx 0;
	padding: 20rpx 0;
	position: relative;
}

.pd text {
	display: flex;
	/* margin-left: 20rpx; */
	font-size: 24rpx;
	/* color: #151515; */
	letter-spacing: 0.39px;
	line-height: 50rpx;
}

.pd .title {
	font-size: 32rpx;
	color: #333333;
}

.pd .address {
	position: relative;
}

.pd .my-btn {
	position: absolute;
	top: 16px;
	right: 16px;
}


</style>
